<!--
 @description 客户经理查询
 @fileName CustomerManager.vue
 @author zengqiongying
 @created 2023/04/18 20:44:27
-->
<template>
  <div class="has-top-pt">
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="输入客户经理编码/名称/手机号"
        @search="resetPageData"
        @clear="resetPageData"
        @cancel="resetPageData"
      />
    </div>
    <div class="dealer-choice-page">
      <List ref="qmpList" v-model:finished="finished" :reset-fun="resetData" :load="load" :refresh="load">
        <div class="dealer-list">
          <div v-for="(item, i) in list" :key="i" class="item">
            <div class="item-content">
              <div class="code">{{ item.adAccount }}</div>
              <div class="title">{{ item.personName }} {{ item.personTel }}</div>
              <div class="office">{{ item.accountTypeName }}</div>
            </div>
            <div class="btn-choice" @click="onSelect(item)">选择</div>
          </div>
        </div>
      </List>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref, reactive, toRefs, getCurrentInstance, nextTick } from 'vue'
  import SearchInput from '@/components/SearchInput/index.vue'
  import List from '@/components/List/index.vue'
  import { getCustomerManagerPage } from '@/apis/search'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from 'vuex'

  export default {
    name: 'SearchCustomerManager',
    components: { SearchInput, List },
    setup(props: any, ctx: any) {
      const qmpList = ref()
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const $route = useRoute()
      const $store = useStore()
      const officeCode = $route.query?.office || ''
      const customerCode = $route.query?.customer || ''
      const datas = reactive({
        searchValue: '',
        list: [],
        finished: false,
        showDetail: false
      })
      const load = async (page: number, rows: number) => {
        let paramsRaw = {}
        if (datas.searchValue) {
          paramsRaw = {
            paramKeyword: datas.searchValue
          }
        }
        const filtersRaw = [
          { id: 'officeCode', property: 'officeCode', operator: '=', value: officeCode },
          { id: 'isAccountManager', property: 'isAccountManager', operator: '=', value: '1' }
        ]
        if (customerCode) {
          filtersRaw.push({ id: 'customerCode0', property: 'customerCode', operator: '=', value: customerCode })
        }
        const paramsData = {
          page,
          rows,
          filtersRaw,
          paramsRaw,
          sortersRaw: [],
          pageFlag: true
        }
        return getCustomerManagerPage(paramsData).then((res: any) => {
          const resData = res.data
          const list = resData.records
          if (page === 1) {
            datas.list = list
          } else {
            datas.list = datas.list.concat(list)
          }
          if (resData.total <= datas.list.length) {
            datas.finished = true
          }
        })
      }
      const resetData = () => {
        datas.list = []
      }
      const resetPageData = () => {
        qmpList.value.resetPageData()
      }

      const onSelect = (d: any) => {
        const fucName = $route.query.name
        const params = {
          personCode: d.adAccount || '',
          personName: d.personName || '',
          personTel: d.personTel || '',
          accountType: d.accountType || '',
          accountTypeName: d.accountTypeName || ''
        }
        proxy.$SimpleEvents.emit(fucName, params)
        nextTick(() => {
          $router.goBack()
        })
      }

      return {
        ...toRefs(datas),
        load,
        resetData,
        qmpList,
        resetPageData,
        onSelect
      }
    }
  }
</script>
<style lang="less" scoped>
  .dealer-choice-page {
    position: relative;
    height: calc(100vh - 88px);
    .dealer-list {
      padding: 8px 14px;
      .item {
        margin-bottom: 8px;
        padding: 16px 14px;
        min-height: 100px;
        box-sizing: border-box;
        border-radius: 8px;
        background: var(--bg-global-weaker);
        display: flex;
        align-items: center;
        .btn-choice {
          width: 44px;
          height: 24px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid var(--button-main-default);
          font: var(--font-control-xl);
          color: var(--button-main-default);
          background: var(--bg-focusing-brand);
        }
        .item-content {
          flex: 1;
          margin-right: 8px;
          > div {
            min-height: 20px;
          }
          .code {
            font: var(--font-main-strengthen);
            color: var(--texticon-color-brand-normal);
          }
          .title {
            padding: 4px 0;
            font: var(--font-main-title-strengthen);
            color: var(--texticon-default-strong);
          }
          .office {
            font: var(--font-main-body);
            color: var(--texticon-default-stronger);
          }
        }
      }
    }
  }
  .popup-detail-container {
    height: 70vh;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }
</style>
